/*  Complete project details: https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/  */

html {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    text-align: center;
  }
  h1 {
    font-size: 1.8rem;
    color: white;
  }
  p {
    font-size: 1.4rem;
  }
  .topnav {
    overflow: hidden;
    background-color: #0A1128;
  }
 body {
      font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	width: 100%;
	height: 100%;
	}
    .topnav {
		width: 100%;height: 100px;
		background-color: #9fa6de;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2em;
		}
    .content {
		display: flex;
		padding-top: 10px;height: 80%;
		div {
			border: 1px solid #e2f5e978;
			}}
    .left {
		position: relative;
		width: 15%;
		min-width: 180px;
		text-align: center;
    .bottom {
		height: 387px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		}}
    .center {
		width: 70%;
		}
    .right {
		position: relative;
		width: 15%;
		min-width: 200px;
    .bottom {
		position: absolute;
		bottom: 20px;
		width: 100%;
		margin-left: -10px;
		}}
    .right,
    .left {
      .slider {
        -webkit-appearance: none;
        
        width: 90%;
        height: 25px;
        background: #aff19954;
        outline: none;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
        /* transform: rotate(-90deg); */
        transform-origin: bottom left;
      }
      .slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 50px;
        height: 50px;
		border-radius:8px;
        background: #ed18d4;
        cursor: pointer;
      }
      .slider::-moz-range-thumb {
        width: 50px;
        height: 50px;
        background: #ed18d4;
        cursor: pointer;
        transform: rotate(-90deg);
        transform-origin: bottom left;
      }
    }

    .left {
      .slider {
        -webkit-appearance: none;
        margin-left: -1px;
        width: 280px;
        height: 30px;
        background: #aff19954;
        outline: none;
        -webkit-transition: 0.2s;
        transition: opacity 0.2s;
        transform: rotate(270deg);
        transform-origin: center bottom;
        position: relative;
        top: 90px;
      }
    }

    .checkbox {
      padding: 5px;
      .checkboxclass {
        width: 120px;
        height: 60px;
        background-color: #aff1996b;
        border-radius: 15px;
        position: relative;
        margin: 15px auto;
      }

      .checkboxclass input[type="checkbox"] {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .checkboxclass label {
        display: block;
        width: 60px;
        height: 60px;
        background-color: #f0e207;
        border-radius: 25%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.2s ease;
        cursor: pointer;
      }

      .checkboxclass input[type="checkbox"]:checked + label {
        left: calc(100% - 60px);
      }
    }
    img {
      width: auto;
      max-height: -webkit-fill-available;
      height: auto;
    }